<template>
  <div
    class="buttonBox"
    :class="{
      info: type == 'info',
      success: type == 'success',
      warning: type == 'warning',
      error: type == 'error',
      default: type == 'default',
      fl: float == 'l',
      fr: float == 'r',
    }"
    :style="{
      width: width,
      background: bgColor,
      color: fontColor,
      lineHeight: lineHeight + 'px',
      fontSize: fontSize + 'px',
      border: border,
    }"
    @click="Myclick"
  >
    {{ butContent }}
  </div>
</template>
<script>
export default {
  name: "Button",
  props: {
    width: {
      //宽度
      type: String,
      default: "auto",
    },
    bgColor: {
      //背景
      type: String,
      default: "",
    },
    fontColor: {
      //字体
      type: String,
      default: "#fff",
    },
    fontSize: {
      //字体大小
      type: Number,
      default: 14,
    },
    lineHeight: {
      type: Number,
      default: 30,
    },
    butContent: {
      //字体
      type: String,
      default: "确认",
    },
    type: {
      type: String,
      default: "default",
    },
    float: {
      type: String,
      default: "",
    },
    border: {
      type: String,
      default: "none",
    },
  },
  emits: ["click"],
  setup(props, ctx) {
    const Myclick = function () {
      ctx.emit("click", props.type);
    };
    return {
      Myclick,
    };
  },
};
</script>
<style lang="less" scoped>
.buttonBox {
  cursor: pointer;
  padding: 0 20px;
  box-sizing: border-box;
  opacity: 0.8;
  text-align: center;
  transition: 0.3s;
  border-radius: 5px;
  margin: 0 auto;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}
.fl.buttonBox {
  float: left;
  margin: 2px 5px;
}
.fr.buttonBox {
  float: right;
  margin: 2px 5px;
}
.buttonBox:hover {
  opacity: 1;
}
.default.buttonBox {
  background: #00a2ff;
}
.info.buttonBox {
  background: #909399;
}
.success.buttonBox {
  background: #67c23a;
}
.warning.buttonBox {
  background: #e6a23c;
}
.error.buttonBox {
  background: #f56c6c;
}
</style>
